<template>
  <div class="mine-order-layout">
    <van-tabs v-model="active" :border="false" color="#0E5CE4">
      <van-tab name>
        <template #title>
          <span :class="['tab-title', !active && 'active-tab']">全部订单</span>
        </template>
      </van-tab>

      <van-tab name="pending">
        <template #title>
          <span :class="['tab-title', active === 'pending' && 'active-tab']">待付款</span>
        </template>
      </van-tab>

      <van-tab name="refund">
        <template #title>
          <span :class="['tab-title', active === 'refund' && 'active-tab']">退款</span>
        </template>
      </van-tab>
    </van-tabs>

    <div v-for="item in order.array" :key="item.id" class="order-item" @click="$router.push({ name: 'mine-order-detail', params: { id: '1' } })">
      <div class="header">
        <div>
          <span class="name">{{ item.name }}</span>
          <van-icon name="arrow"  color="#999999" />
        </div>
        <div class="status">
          <status status="success" text="交易成功" />
        </div>
      </div>

      <row-image
        :name="item.name"
        :desc="item.desc"
        :cover="item.cover"
        :tags="item.tags"
        :price="item.price"
        :sale="item.sale"
      />

      <div class="footer">
        <div class="cashier">
          <span>{{ `共${item.number}件商品 合计：` }}</span>
          <span class="price">
            <span>¥</span>
            <span :style="{ fontSize: '16px' }">{{ intager(item.price) }}</span>
            <span>{{ `.${decimal(item.price)}` }}</span>
          </span>
        </div>

        <div class="action"></div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Tab, Tabs, Icon } from 'vant'
import RowImage from '@/components/Order/RowImage'
import Status from '@/components/Order/Status'

Vue.use(Tab)
  .use(Tabs)
  .use(Icon)

const intager = value => {
  const [intager] = String(Number(value).toFixed(2)).split('.')
  return intager
}

const decimal = value => {
  const [intager, decimal] = String(Number(value).toFixed(2)).split('.')
  return decimal
}

export default {
  components: {
    RowImage,
    Status
  },

  data() {
    return {
      active: '',
      order: {
        array: [
          {
            id: 1,
            cover: '',
            name: '简历精修课',
            desc: '商品描述商品描述描述商品描述描述商品描...',
            tags: ['专业培训', '读书补贴'],
            status: 'success',
            price: 18.98,
            sale: 3.88,
            number: 1
          },
          {
            id: 2,
            cover: '',
            name: '简历精修课',
            desc: '商品描述商品描述描述商品描述描述商品描...',
            tags: ['专业培训', '读书补贴'],
            ç: 'success',
            price: 18.98,
            sale: 3.88,
            number: 1
          }
        ],
        total: 0,
        page: 1,
        limit: 10
      },
      intager,
      decimal
    }
  }
}
</script>

<style lang="less" scoped>
.mine-order-layout {
  .tab-title {
    background-color: #999999;
    background-clip: text;
    color: transparent;
    font-size: 15px;
    transition: 300ms;
  }

  .active-tab {
    background: linear-gradient(to bottom, #679ffc, #0d5ce4);
    background-clip: text;
    font-weight: 500;
    font-size: 17px;
  }

  .order-item {
    margin-top: 5px;
    background-color: #ffffff;

    .header {
      padding: 15px 17px 14.5px 17px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      div {
        display: flex;
        align-items: center;
      }

      .name {
        margin-right: 8px;
        font-size: 15px;
        font-weight: 500;
        color: #333333;
      }
    }

    .footer {
      padding: 11.5px 17px 12.5px 17px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .cashier {
        font-size: 13px;
        color: #999999;

        .price {
          color: #FF7376;
          font-size: 12px;
        }
      }
    }
  }
}
</style>

